React Performansını Açığa Çıkarmak: Fiber İş Döngüsü, Zamanlayıcı Entegrasyonu ve Öncelik Kuyrukları

Ön uç geliştirmenin sürekli gelişen ortamında performans yalnızca bir özellik değil; temel bir beklentidir. Çeşitli cihazlar ve ağ koşulları genelinde dünya çapında milyonlarca kişi tarafından kullanılan uygulamalar için sorunsuz ve duyarlı bir kullanıcı arayüzü (UI) elde etmek çok önemlidir. UI oluşturmak için önde gelen bir JavaScript kütüphanesi olan React, bu zorluğun üstesinden gelmek için önemli mimari değişiklikler geçirmiştir. Bu iyileştirmelerin merkezinde, mutabakat algoritmasının tam bir yeniden yazımı olan React Fiber mimarisi yer almaktadır. Bu yazı, React Fiber'ın iş döngüsünün inceliklerini, zamanlayıcıyla sorunsuz entegrasyonunu ve küresel bir kitle için performanslı ve akıcı bir kullanıcı deneyimi düzenlemesinde öncelik kuyruklarının kritik rolünü derinlemesine inceleyecektir.

React'in Oluşturma Evrimi: Yığın'dan Fiber'a

Fiber'dan önce, React'in oluşturma süreci özyinelemeli bir çağrı yığınına dayanıyordu. Bir bileşen güncellendiğinde, React bileşen ağacında gezinir ve UI değişikliklerinin bir açıklamasını oluştururdu. Bu süreç, birçok uygulama için etkili olsa da, önemli bir sınırlaması vardı: senkron ve engelleyiciydi. Büyük bir güncelleme meydana gelirse veya karmaşık bir bileşen ağacının oluşturulması gerekiyorsa, ana iş parçacığı aşırı yüklenebilir, bu da özellikle birçok küresel pazarda yaygın olan daha az güçlü cihazlarda takılmalara neden olan animasyonlara, duyarsız etkilere ve kötü bir kullanıcı deneyimine yol açabilir.

Uluslararası olarak kullanılan e-ticaret uygulamalarında yaygın bir senaryoyu düşünün: uluslararası bir e-ticaret uygulamasında karmaşık bir ürün filtresiyle etkileşimde bulunan bir kullanıcı. Eski yığın tabanlı mutabakat ile, birden fazla filtreyi aynı anda uygulamak, tüm güncellemeler tamamlanana kadar UI'ı dondurabilir. Bu, herhangi bir kullanıcı için sinir bozucu olacaktır, ancak özellikle internet bağlantısının daha az güvenilir olabileceği veya cihaz performansının daha büyük bir endişe kaynağı olduğu bölgelerde daha fazla etki yaratacaktır.

React Fiber, eşzamanlı oluşturmayı etkinleştirerek bu sınırlamaları gidermek için tanıtıldı. Eski yığının aksine Fiber, yeniden girilebilir, asenkron ve kesintiye uğratılabilir bir mutabakat algoritmasıdır. Bu, React'in oluşturmayı duraklatabileceği, diğer görevleri gerçekleştirebileceği ve ardından ana iş parçacığını engellemeden oluşturmaya devam edebileceği anlamına gelir.

Fiber Düğümünün Tanıtılması: Daha Yetenekli Bir İş Birimi

Özünde, React Fiber iş birimini bir bileşen örneğinden bir Fiber düğümüne yeniden tanımlar. Bir Fiber düğümünü, yapılacak bir iş birimini temsil eden bir JavaScript nesnesi olarak düşünün. React uygulamanızdaki her bileşenin karşılık gelen bir Fiber düğümü vardır. Bu düğümler, bileşen ağacını yansıtan ancak yeni oluşturma modelini kolaylaştıran ek özelliklere sahip bir ağaç oluşturmak için birbirine bağlanır.

Bir Fiber düğümünün temel özellikleri şunları içerir:

• Tür: Öğenin türü (örneğin, bir işlev bileşeni, bir sınıf bileşeni, bir dize, bir DOM öğesi).
• Anahtar: Liste öğeleri için benzersiz bir tanımlayıcı, verimli güncellemeler için kritik öneme sahiptir.
• Çocuk: İlk çocuk Fiber düğümüne bir işaretçi.
• Kardeş: Sonraki kardeş Fiber düğümüne bir işaretçi.
• Dönüş: Ebeveyn Fiber düğümüne bir işaretçi.
• Belleğe AlınanProps: Önceki oluşturmayı belleğe almak için kullanılan props.
• Belleğe AlınanDurum: Önceki oluşturmayı belleğe almak için kullanılan durum.
• Alternatif: Diğer ağaçtaki (mevcut ağaç veya çalışma halindeki ağaç) karşılık gelen Fiber düğümüne bir işaretçi. Bu, React'in oluşturma durumları arasında geçiş yapma şeklinin temelidir.
• Bayraklar: Bu Fiber düğümünde ne tür bir işin yapılması gerektiğini belirten bit maskeleri (örneğin, props güncelleme, efekt ekleme, düğümü silme).
• Efektler: Bu Fiber düğümüyle ilişkili efektlerin bir listesi, yaşam döngüsü yöntemleri veya kancalar gibi.

Fiber düğümleri, bileşen örnekleri gibi JavaScript çöp toplama tarafından aynı şekilde doğrudan yönetilmez. Bunun yerine, React'in verimli bir şekilde gezinebileceği bir bağlı liste oluştururlar. Bu yapı, React'in işi kolayca yönetmesine ve kesintiye uğratmasına olanak tanır.

React Fiber İş Döngüsü: Oluşturma Sürecini Düzenleme

React Fiber'ın eşzamanlılığının kalbi, onun iş döngüsüdür. Bu döngü, Fiber ağacında gezinmekten, iş yapmak ve tamamlanan değişiklikleri DOM'a uygulamaktan sorumludur. Onu devrimci yapan şey, duraklatılma ve devam ettirilme yeteneğidir.

İş döngüsü genel olarak iki aşamaya ayrılabilir:

1. Oluşturma Aşaması (Çalışma Halindeki Ağaç)

Bu aşamada React, bileşen ağacında gezinir ve Fiber düğümleri üzerinde iş yapar. Bu iş şunları içerebilir:

• Bileşen fonksiyonlarını veya `render()` yöntemlerini çağırma.
• Props ve durumu mutabakat etme.
• Fiber düğümleri oluşturma veya güncelleme.
• Yan etkileri belirleme (örneğin, `useEffect`, `componentDidMount`).

Oluşturma aşamasında React, çalışma halindeki bir ağaç oluşturur. Bu, UI'ın potansiyel yeni durumunu temsil eden ayrı bir Fiber düğümleri ağacıdır. Önemlisi, iş döngüsü bu aşamada kesintiye uğratılabilir. Daha yüksek öncelikli bir görev gelirse (örneğin, kullanıcı girişi), React mevcut oluşturma işini duraklatabilir, yeni görevi işleyebilir ve ardından kesintiye uğrayan işi daha sonra devam ettirebilir.

Bu kesintiye uğratılabilirlik, sorunsuz bir deneyim elde etmek için kritiktir. Bir uluslararası seyahat web sitesindeki bir arama çubuğuna yazan bir kullanıcıyı hayal edin. React öneri listesini oluşturmakla meşgulken yeni bir tuş vuruşu gelirse, öneri oluşturmayı duraklatabilir, tuş vuruşunu işleyerek arama sorgusunu güncelleyebilir ve ardından yeni girdiye dayalı önerileri oluşturmaya devam edebilir. Kullanıcı, bir gecikme yerine yazmasına anında bir yanıt algılar.

İş döngüsü, ne tür bir işin yapılması gerektiğini belirlemek için `bayraklarını` kontrol eden Fiber düğümleri arasında yinelenir. Bir Fiber düğümünden çocuklarına, sonra kardeşlerine ve ebeveynine geri döner, gerekli işlemleri gerçekleştirir. Bu geçiş, tüm bekleyen işler tamamlanana veya iş döngüsü kesintiye uğrayana kadar devam eder.

2. Uygulama Aşaması (Değişikliklerin Uygulanması)

Oluşturma aşaması tamamlandığında ve React'te kararlı bir çalışma halindeki ağaç olduğunda, uygulama aşamasına girer. Bu aşamada React, yan etkileri gerçekleştirir ve gerçek DOM'u günceller. Bu aşama, UI'ı doğrudan değiştirdiği için senkron ve kesintiye uğratılamaz. React, DOM'u güncellediğinde, titremeyi veya tutarsız UI durumlarını önlemek için bunu tek bir atomik işlemde yaptığından emin olmak ister.

Uygulama aşamasında React şunları yapar:

• DOM değişikliklerini yürütür (öğeleri ekleme, kaldırma, güncelleme).
• `componentDidMount`, `componentDidUpdate` gibi yan etkileri ve `useEffect` tarafından döndürülen temizleme işlevlerini çalıştırır.
• DOM düğümlerine yapılan başvuruları günceller.

Uygulama aşamasından sonra, çalışma halindeki ağaç mevcut ağaç haline gelir ve sonraki güncellemeler için işlem yeniden başlayabilir.

Zamanlayıcının Rolü: İşleri Önceliklendirme ve Zamanlama

Fiber iş döngüsünün kesintiye uğratılabilir doğası, ne zaman iş yapılacağını ve hangi işin ilk yapılacağını belirleyecek bir mekanizma olmadan pek kullanışlı olmaz. İşte React Zamanlayıcısı'nın devreye girdiği yer burasıdır.

Zamanlayıcı, React'in işinin yürütülmesini yönetmek için kullandığı ayrı, düşük seviyeli bir kütüphanedir. Birincil sorumluluğu şunlardır:

• İş Zamanlama: Oluşturma görevlerinin ne zaman başlayacağını veya devam edeceğini belirleme.
• İş Önceliklendirme: Farklı görevlere öncelikler atayarak önemli güncellemelerin zamanında işlenmesini sağlama.
• Tarayıcıyla İşbirliği Yapma: Ana iş parçacığını engellemekten kaçınma ve tarayıcının boyama ve kullanıcı girdisi işleme gibi kritik görevleri gerçekleştirmesine izin verme.

Zamanlayıcı, kontrolü periyodik olarak tarayıcıya geri vererek diğer görevlerin yürütülmesine olanak tanır. Ardından, tarayıcı boşta olduğunda veya daha yüksek öncelikli bir görevin işlenmesi gerektiğinde işini devam ettirmeyi talep eder.

Bu işbirlikçi çoklu görev, özellikle ağ gecikmesi ve cihaz yeteneklerinin önemli ölçüde değişebileceği küresel bir kitleye sahip duyarlı uygulamalar oluşturmak için kritiktir. Daha yavaş internete sahip bir bölgedeki bir kullanıcı, React'in oluşturmasının tarayıcının ana iş parçacığını tamamen tekeline alması durumunda yavaş hissettiren bir uygulama deneyimleyebilir. Zamanlayıcı, vererek, yoğun oluşturma sırasında bile tarayıcının kullanıcı etkileşimlerine yanıt verebileceğini veya UI'ın kritik kısımlarını oluşturabileceğini ve çok daha sorunsuz bir algılanan performans sağladığını garanti eder.

Öncelik Kuyrukları: Eşzamanlı Oluşturmanın Omurgası

Zamanlayıcı hangi işi önce yapacağına nasıl karar verir? İşte öncelik kuyruklarının vazgeçilmez hale geldiği yer burasıdır. React, farklı güncelleme türlerini aciliyetlerine göre sınıflandırır ve her birine bir öncelik seviyesi atar.

Zamanlayıcı, önceliklerine göre sıralanmış bekleyen görev kuyruğunu tutar. İş yapma zamanı geldiğinde, zamanlayıcı kuyruktan en yüksek öncelikli görevi seçer.

İşte öncelik seviyelerinin tipik bir dökümü (ancak kesin uygulama ayrıntıları gelişebilir):

• Anında Öncelik: Kullanıcı girdisine yanıt vermek gibi ertelenmemesi gereken acil güncellemeler için (örneğin, bir metin alanına yazma). Bunlar genellikle senkron olarak veya çok yüksek bir aciliyetle işlenir.
• Kullanıcı Engelleme Önceliği: Modal bir iletişim kutusu veya bir açılır menü göstermek gibi kullanıcı etkileşimini engelleyen güncellemeler için. Bunların kullanıcıyı engellememesi için hızlı bir şekilde oluşturulması gerekir.
• Normal Öncelik: Veri çekme ve bir liste oluşturma gibi kullanıcı etkileşimi üzerinde acil bir etkisi olmayan genel güncellemeler için.
• Düşük Öncelik: Analitik olayları veya arka plan hesaplamaları gibi ertelenebilecek kritik olmayan güncellemeler için.
• Ekran Dışı Öncelik: Şu anda ekranda görünmeyen bileşenler için (örneğin, ekran dışı listeler, gizli sekmeler). Bunlar en düşük öncelikle veya gerekirse atlanarak oluşturulabilir.

Zamanlayıcı, mevcut işi ne zaman kesintiye uğratacağına ve ne zaman devam ettireceğine karar vermek için bu öncelikleri kullanır. Örneğin, kullanıcı bir giriş alanına yazarsa (anında öncelik) React büyük bir sonuç listesi oluştururken (normal öncelik), zamanlayıcı liste oluşturmayı duraklatacak, giriş olayını işleyecek ve ardından yeni girdiye dayalı olarak liste oluşturmaya devam edecektir.

Pratik Uluslararası Örnek:

Farklı kıtalardaki ekipler tarafından kullanılan gerçek zamanlı bir işbirliği aracı düşünün. Bir kullanıcı, önemli miktarda oluşturma gerektiren büyük bir yerleştirilmiş grafiği görüntüleyen başka bir kullanıcı olurken, bir belgeyi düzenleyebilir (yüksek öncelik, anında güncelleme). Bir iş arkadaşından yeni bir mesaj gelirse (dikkat gerektirdiği için kullanıcı engelleme önceliği), zamanlayıcı mesaj bildiriminin derhal görüntülenmesini sağlayacak, potansiyel olarak grafik oluşturmayı duraklatacak ve ardından mesaj işlendikten sonra grafik oluşturmaya devam edecektir.

Bu gelişmiş önceliklendirme, kritik kullanıcı odaklı güncellemelerin her zaman önceliklendirilmesini sağlar, bu da kullanıcının konumu veya cihazından bağımsız olarak daha duyarlı ve keyifli bir deneyime yol açar.

Fiber'ın Zamanlayıcı ile Nasıl Entegre Olduğu

Fiber ve zamanlayıcı arasındaki entegrasyon, eşzamanlı React'i mümkün kılan şeydir. Zamanlayıcı görevleri duraklatma ve devam ettirme mekanizmasını sağlarken, Fiber'ın kesintiye uğrayabilir doğası bu görevlerin daha küçük iş birimlerine ayrılmasını sağlar.

İşte nasıl etkileşimde bulunduklarına dair basitleştirilmiş bir akış:

1. Bir güncelleme oluşur: Bir bileşenin durumu değişir veya props güncellenir.
2. Zamanlayıcı işi zamanlar: Zamanlayıcı güncellemeyi alır ve ona bir öncelik atar. Güncellemeyle ilişkili Fiber düğümünü uygun öncelik kuyruğuna yerleştirir.
3. Zamanlayıcı oluşturma talebinde bulunur: Ana iş parçacığı boşta olduğunda veya kapasiteye sahip olduğunda, zamanlayıcı en yüksek öncelikli işi gerçekleştirmeyi talep eder.
4. Fiber iş döngüsü başlar: React'in iş döngüsü, çalışma halindeki ağaçta gezinmeye başlar.
5. İş gerçekleştirilir: Fiber düğümleri işlenir ve değişiklikler belirlenir.
6. Kesinti: Daha yüksek öncelikli bir görev mevcut olursa (örneğin, kullanıcı girişi) veya mevcut iş belirli bir zaman bütçesini aşarsa, zamanlayıcı Fiber iş döngüsünü kesintiye uğratabilir. Çalışma halindeki ağacın mevcut durumu kaydedilir.
7. Daha yüksek öncelikli görev işlenir: Zamanlayıcı, yeni bir oluşturma geçişini içerebilecek yeni yüksek öncelikli görevi işler.
8. Devam etme: Daha yüksek öncelikli görev işlendikten sonra, zamanlayıcı kaydedilen durumu kullanarak kesintiye uğrayan Fiber iş döngüsünü kaldığı yerden devam ettirebilir.
9. Uygulama: Önceliklendirilmiş tüm işler oluşturma aşamasında tamamlandıktan sonra React, DOM'u güncellemek için uygulama aşamasını gerçekleştirir.

Bu etkileşim, React'in farklı güncellemelerin aciliyetine ve ana iş parçacığının kullanılabilirliğine göre oluşturma sürecini dinamik olarak ayarlayabilmesini sağlar.

Küresel Uygulamalar İçin Fiber, Zamanlayıcı ve Öncelik Kuyruklarının Faydaları

Fiber ve zamanlayıcı ile tanıtılan mimari değişiklikler, özellikle küresel bir kullanıcı tabanına sahip uygulamalar için önemli avantajlar sunar:

• Geliştirilmiş Yanıt Verme: Ana iş parçacığının engellenmesini önleyerek, uygulamalar karmaşık oluşturma görevleri sırasında bile kullanıcı etkileşimlerine duyarlı kalır. Bu, dünya çapında birçok bölgede yaygın olan mobil cihazlardaki veya daha yavaş internet bağlantısı olan kullanıcılardaki kullanıcılar için kritiktir.
• Daha Sorunsuz Kullanıcı Deneyimi: Kesintiye uğratılabilir oluşturma, animasyonların ve geçişlerin daha akıcı olabileceği ve kritik güncellemelerin (form doğrulama hataları gibi) diğer daha az önemli görevlerin tamamlanmasını beklemeden hemen görüntülenebileceği anlamına gelir.
• Daha İyi Kaynak Kullanımı: Zamanlayıcı, ne zaman ve nasıl oluşturulacağına dair daha akıllı kararlar alabilir, bu da cihaz kaynaklarının daha verimli kullanılmasına yol açar; bu, mobil cihazlarda pil ömrü ve eski donanımlarda performans için önemlidir.
• Geliştirilmiş Kullanıcı Tutma: Tutarlı bir şekilde sorunsuz ve duyarlı bir uygulama, kullanıcı güveni ve memnuniyeti oluşturur ve bu da küresel olarak daha iyi tutma oranlarına yol açar. Yavaş veya duyarsız bir uygulama, kullanıcıların hızla vazgeçmesine neden olabilir.
• Karmaşık UI'lar İçin Ölçeklenebilirlik: Uygulamalar büyüdükçe ve daha dinamik özellikler içerdiğinden, Fiber'ın mimarisi, performanstan ödün vermeden karmaşık oluşturma taleplerini yönetmek için sağlam bir temel sağlar.

Örneğin, küresel bir finans teknolojisi uygulaması için, gerçek zamanlı piyasa verisi güncellemelerinin anında görüntülenmesini sağlamak ve aynı zamanda kullanıcıların gecikme olmadan arayüzde gezinmesine izin vermek kritiktir. Fiber ve ilgili mekanizmaları bunu mümkün kılar.

Hatırlanması Gereken Anahtar Kavramlar

• Fiber Düğümü: Kesintiye uğratılabilir oluşturmayı sağlayan React'teki yeni, daha esnek iş birimi.
• İş Döngüsü: Fiber ağacında gezinmek, oluşturma işini gerçekleştirmek ve değişiklikleri uygulamak olan çekirdek süreç.
• Oluşturma Aşaması: React'in çalışma halindeki ağacı oluşturduğu kesintiye uğratılabilir aşama.
• Uygulama Aşaması: DOM değişikliklerinin ve yan etkilerin uygulandığı senkron, kesintiye uğratılamayan aşama.
• React Zamanlayıcısı: React görevlerinin yürütülmesini yönetmekten, önceliklendirmekten ve tarayıcıyla işbirliği yapmaktan sorumlu kütüphane.
• Öncelik Kuyrukları: Zamanlayıcının görevleri aciliyetlerine göre sıralamak için kullandığı veri yapıları, kritik güncellemelerin ilk önce işlenmesini sağlar.
• Eşzamanlı Oluşturma: React'in oluşturma görevlerini duraklatma, devam ettirme ve önceliklendirme yeteneği, daha duyarlı uygulamalara yol açar.

Sonuç

React Fiber, React'in oluşturmayı işleme biçiminde önemli bir sıçramayı temsil eder. Eski yığın tabanlı mutabakatı kesintiye uğratılabilir, yeniden girilebilir bir Fiber mimarisiyle değiştirerek ve öncelik kuyruklarından yararlanan gelişmiş bir zamanlayıcı ile entegre ederek React, gerçek eşzamanlı oluşturma yeteneklerinin kilidini açmıştır. Bu sadece daha performanslı ve duyarlı uygulamalara yol açmakla kalmaz, aynı zamanda çeşitli küresel kitleler için, cihazlarından, ağ koşullarından veya teknik yetkinliklerinden bağımsız olarak daha eşit bir kullanıcı deneyimi sağlar. Bu altta yatan mekanizmaları anlamak, modern web için yüksek kaliteli, performanslı ve kullanıcı dostu uygulamalar oluşturmayı hedefleyen herhangi bir geliştirici için kritiktir.

React ile oluşturmaya devam ederken, bu kavramları aklınızda bulundurun. Bunlar, dünya çapındaki önde gelen web uygulamalarından beklediğimiz sorunsuz, kesintisiz deneyimlerin arkasındaki sessiz kahramanlardır. Fiber'ın, zamanlayıcının ve akıllı önceliklendirmenin gücünden yararlanarak, uygulamalarınızın her kıtadaki kullanıcıları memnun etmesini sağlayabilirsiniz.